import React from 'react'
import { Tree } from 'antd';
import type { TreeDataNode, TreeProps } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import {useComponentsStore} from '../../stores/components'
//1.第一需要有一个组件去展示大纲
//通过json去展示大纲,去遍历

export default function Outline() {
  const {components,setCurComponentId} = useComponentsStore((state) => state)
  const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
  return (
    <Tree
      fieldNames={{title:'desc',key:'id'}}
      showLine
      defaultExpandedKeys={['0-0-0', '0-0-1']}
      onSelect={([selectedKey])=>{setCurComponentId(selectedKey as number)}}
      defaultExpandAll={true}
      treeData={components as any}
      switcherIcon={<DownOutlined />}
    />
  )
}
